<template>
  <div :style="{backgroundColor: bgColor}"
    class="tw-aiclass-badge">
    <div class="xbadgeborder">{{labelName}}<div class='xbadgebox'></div></div>
    <template v-if="data.length>0">
    <div class="tw-aiclass-badge-item" v-for="(item,index) in data" :key="index">
      <div class="ximage">
        <img :src="require('./assets/ok'+item.type+'.png')" v-if="item.isok"/>
        <img :src="require('./assets/no'+item.type+'.png')" v-else/>
      </div>
      <div class="xlabel" :title="item.name">{{item.name}}</div>
    </div>
    </template>
    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
const props = require('./props')
import nodata from '../tw-lib-base/no-data/no-data'

export default {
  name: 'web-aiclass-badge',
  mixins: [nodata],

  props,

  data() {
    return {
      listData: []
    }
  },

  computed: {
    style () {
      return {
        overflow: this.overflow,
        itemWidth: this.itemWidth,
        itemHeight: this.itemHeight,
        imgWidth: this.imgWidth,
        marginWidth: this.marginWidth,
        marginTop: this.marginTop,
        labelcolor: this.labelcolor,
        labelFontSize: this.labelFontSize,
        labelWidth: this.labelWidth,
        bordercolor: this.bordercolor,
      }
    },
    borderwidth () {
      let w = 0
      if (this.labelWidth === '') {
        w = 0
      } else {
        w = parseInt(this.labelWidth) - 80
      }
      return w + 'px'
    }
  },

  methods: {
    init () {
      this.setStyle()
    },
    setStyle () {
      const style = `
        ::root.tw-aiclass-badge {
          overflow-y:  ${this.overflow};
          border-color: ${this.bordercolor};
        }
        ::root.tw-aiclass-badge .tw-aiclass-badge-item {
          width:  ${this.itemWidth};
          height: ${this.itemHeight};
          margin: ${this.marginWidth};
        }

        ::root.tw-aiclass-badge img {
          width:  ${this.imgWidth};
        }

        ::root.tw-aiclass-badge .xlabel {
          color:  ${this.labelcolor};
          font-size: ${this.labelFontSize};
          margin-top: ${this.marginTop};
        }

        ::root.tw-aiclass-badge .xbadgeborder {
          width: ${this.labelWidth};
          background-color: ${this.bordercolor};
        }

        ::root.tw-aiclass-badge .xbadgebox {
          left: ${this.borderwidth};
          border-top-color: ${this.bordercolor};
        }
      `

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },
  },

  mounted () {
    this.init()
  },

  beforeDestroy () {
  },

  watch: {
    // data: {
    //   deep: true,
    //   handler () {
    //     this.initData()
    //   }
    // },
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
